<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link href="css/redmond/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"/>
  <script src="js/jquery-1.5.1.min.js"></script>
  <script src="js/jquery-ui-1.8.14.custom.min.js"></script>
  
  
  
  	
  <script type="text/javascript">
  	$(function(){
		$("button,a").button();
		$( "#beginning" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-start"
			}
		});
		$( "#rewind" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-prev"
			}
		});
		$( "#forward" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-next"
			}
		});
		$( "#end" ).button({
			text: false,
			icons: {
				primary: "ui-icon-seek-end"
			}
		});
		//添加新用户
		$("#new").click(function(){

			$("#dialog").dialog('open');
		})
		//修改用户信息
		$(".modify").click(function(){
			//学来重要
			//var tr=this.parentNode.parentNode;
			//alert(tr.cells[0].innerHTML.trim());
			var $tr=this.parentNode.parentNode;
			$("#mod_account").val($tr.cells[0].innerHTML);
			$("#mod_password").val($tr.cells[1].innerHTML);
			$("#mod_name").val($tr.cells[2].innerHTML);
			$("#mod_status").val($tr.cells[4].innerHTML);
			$("#dialog_modify").dialog('open');
		})
		
	});
	</script><style>
  		#toolbar {padding: 10px 4px;}
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 	</style>
 	<script type="text/javascript">
 	//添加新用户
	$(document).ready(function() {
		var account=$("#user_account");
			password=$("#user_password");
			name=$("#user_name");
			createdate=$("#user_createdate");
			status=$("#user_status");

			mod_password=$("#mod_password");
			mod_name=$("#mod_name");
			mod_status=$("#mod_status");
			allFields = $( [] ).add( account ).add( password )
					.add( name ).add( createdate ).add( status );
			mod_allFields = $( [] ).add( mod_password ).add( mod_name ).add( mod_status );
	
			tips = $( ".tips" );
		//显示错误提示
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
		//网上得来，判断得到内容的长度，英文算一个，汉子算两个
		function getBytesCount(str) 
		{   
		    var ch, st, re = [];   
		    for (var i = 0; i < str.length; i++ ) {
		         ch = str.charCodeAt(i);    // get char      
		         st = [];                   // set up "stack"     
		         do {       
		             st.push( ch & 0xFF );  // push byte to stack       
		             ch = ch >> 8;          // shift value down by 1 byte
		         }  while ( ch );           // add stack contents to result    
		         // done because chars have "wrong" endianness     
		         re = re.concat( st.reverse() );   
		    }  // return an array of bytes   
		    return re.length; 
		}
		//名为n的o对象的长度
		function checkLength( o, n, min, max ) {
			if ( getBytesCount(o.val()) > max || getBytesCount(o.val()) < min ) {
				o.addClass( "ui-state-error" );
				updateTips( n + " 的长度设定在 " +
					min + " 和 " + max + "之间" );
				return false;
			} else {
				return true;
			}
		}
		//正则匹配
		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$("#dialog").dialog( {
			autoOpen : false,
			modal : true,
			buttons : {
				"确定" : function() {
			var bValid = true;
			allFields.removeClass( "ui-state-error" );
			//注意这种写法，如果bvalid已经为false，则之后的&&就不必再比较
			bValid = bValid && checkLength( account, "账号", 3, 20);
			bValid = bValid && checkLength( password, "密码", 3, 20);
			bValid = bValid && checkLength( name, "姓名", 3, 20);
			bValid = bValid && checkLength( createdate, "日期", 10, 10);
			bValid = bValid && checkLength( status, "状态", 1, 1);
			
			bValid = bValid && checkRegexp( account, /^[a-zA-Z0-9_]+$/,
					"要求输入数字、字母或下划线，并以小写字母开头");
			bValid = bValid && checkRegexp( password, /^[a-z]([0-9a-z])+$/,
					"要求输入数字、字母");
			bValid = bValid && checkRegexp( name, /^([0-9a-zA-Z])+$/,
					"要求输入数字、字母");
			bValid = bValid && checkRegexp( createdate, /[0-9_]/,
					"要求输入数字、下划线");
			bValid = bValid && checkRegexp( status, /[0-9]/,
					"要求输入数字");			
					if (bValid) {
						$("#form").submit();
					}
				},
				"重置" : function() {
					$("#form")[0].reset();
					allFields.val("").removeClass("ui-state-error");
				}
			},
			"取消" : function() {
				allFields.val("").removeClass("ui-state-error");
			}

		});
		$("#dialog_modify").dialog( {
			autoOpen : false,
			modal : true,
			buttons : {
				"确定" : function() {
			var bValid = true;
			mod_allFields.removeClass( "ui-state-error" );
			//注意这种写法，如果bvalid已经为false，则之后的&&就不必再比较
			bValid = bValid && checkLength( mod_password, "密码", 3, 20);
			bValid = bValid && checkLength( mod_name, "姓名", 3, 20);
			bValid = bValid && checkLength( mod_status, "状态", 1, 1);
			
			bValid = bValid && checkRegexp( mod_password, /^[a-z]([0-9a-z])+$/,
					"要求输入数字、字母");
			bValid = bValid && checkRegexp( mod_name, /^([0-9a-zA-Z][\x80-\xff])+$/,
					"要求输入数字、字母，每个汉子代表两位");
			bValid = bValid && checkRegexp( mod_status, /[0-9]/,
					"要求输入数字");			
					if (bValid) {
						$("#form_mod").submit();
					}
				},
				"重置" : function() {
					$("#form_mod")[0].reset();
					mod_allFields.val("").removeClass("ui-state-error");
				}
			},
			"取消" : function() {
				mod_allFields.val("").removeClass("ui-state-error");
			}

		});
		
		$( "#user_createdate" ).datepicker({
			showButtonPanel: true,
			dateFormat: 'yy-mm-dd'
		});
		
	});
</script>
  

</head>
<body style="font-size:70%;">
<div id="users-contain" class="ui-widget" style="margin:1em 3em;">
  <table id="users" class="ui-widget ui-widget-content">
			<tr class="ui-widget-header ">
				<th>账号</th>
				<th>密码</th>
				<th>姓名</th>
				<th>创建日期</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
  	<c:forEach items="${scmuser}" var="user">

			<tr>
				<td>${user.account }</td>
				<td>${user.password }</td>
				<td>${user.name }</td>
				<td>${user.createdate }</td>
				<td>${user.status }</td>
				<td>
				<button class="modify">修改</button>
				<a onclick="return window.confirm('确定 删除:${user.account }？');" 
				href="usermain?flag=del_user&userid=${user.account }">
				删除</a>
				</td>
			</tr>
	</c:forEach>
	</table>
	
	<button id="new" >添加新用户</button>
	
		<span id="toolbar" class="ui-widget-header ui-corner-all" style="margin-left: 480px">

			<a id="beginning" href="usermain?flag=separate&pageNow=1">
				首页/go to beginning</a>
				
			<c:if test="${page_now>1}">	
			<a id="rewind" href="usermain?flag=separate&pageNow=${page_now-1}">
				前一页/rewind</a>
			</c:if>	
			
			<c:if test="${page_count>page_now}">	
			<a id="forward" href="usermain?flag=separate&pageNow=${page_now+1}">
				后一页/fast forward</a>
			</c:if>	
			
			<a id="end" href="usermain?pageNow=${page_count}&flag=separate">
				末页/go to end</a>
			<button>${page_now }</button>
			
		</span>
</div>

	<div id="dialog" title="添加新用户">
		<p class="tips"></p>
		<form id="form" action="usermain?flag=add" method="post">
			<ul style="list-style: none">
				<li>
					<label for="user_account">账号</label>
					<input type="text" id="user_account" value="" name="user_account">	
				</li>
				<li>
					<label for="user_password">密码</label>
					<input type="password" id="user_password" value="" name="user_password">	
				</li>
				<li>
					<label for="user_name">姓名</label>
					<input type="text" id="user_name" value="" name="user_name">
				</li>
				<li>
					<label for="user_createdate">日期</label>
					<input type="text" id="user_createdate" value="" name="user_createdate">	
				</li>
				<li>
					<label for="user_status">状态</label>
					<input type="text" id="user_status" value="" name="user_status">
				</li>
			</ul>	
		</form>	
	</div>

	<div id="dialog_modify" title="修改用户信息">
		<p class="tips"></p>
		<form id="form_modify" action="usermain?flag=mod" method="post">
			<ul style="list-style: none">
				<li>
					<label for="mod_account">账号</label>
					<input type="text" id="mod_account" value="" name="mod_account">	
				</li>
				<li>
					<label for="mod_password">密码</label>
					<input type="password" id="mod_password" value="" name="mod_password">	
				</li>
				<li>
					<label for="mod_name">姓名</label>
					<input type="text" id="mod_name" value="" name="mod_name">
				</li>
				<li>
					<label for="mod_status">状态</label>
					<input type="text" id="mod_status" value="" name="mod_status">
				</li>
			</ul>	
		</form>	
	</div>

</body>
</html>